<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>违法违章分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
    
        .cross-pos .layui-input-inline {width:350px;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-dot-circle-o icon"></i>按照类型分析违章违法</div>
                            <div class="layui-card-body">
                                <fieldset class="table-search-fieldset">
                                    <legend>违法类型选取</legend>
                                    <div style="margin: 10px 10px 10px 10px">
                                        <form class="layui-form layui-form-pane" action="">
                                            <div class="layui-form-item cross-pos">
                                                <!-- <div class="layui-inline"> -->
                                                    <label class="layui-form-label">具体类型</label>
                                                    <div class="layui-input-inline" lay-key="7">
                                                        <input type="text" name="" placeholder="默认：全部" autocomplete="off" class="layui-input" id="cur-type">
                                                    </div>
                                                <!-- </div> -->
                                            </div>
                                        </form>
                                    </div>
                                </fieldset>
                                
                                <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                    <legend style="font-size: 16px;font-weight: none;">违章违法发生次数分布热力图</legend>
                                </fieldset> -->
                                <div id="illegal-heap-1" style="width: 100%;height:500px;padding-top:30px;">
                                    <iframe src="heaps/heatmap1.html" width="100%" height="500px" frameborder="0" scrolling="no" name="heap-1"></iframe>
                                </div>
                                <div id="type-line-area" style="width: 100%;height:500px;padding-top: 20px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-pie-chart icon"></i>违法类型占比分析</div>
                            <div class="layui-card-body">
                                <fieldset class="table-search-fieldset">
                                    <legend>路口选取</legend>
                                    <div style="margin: 10px 10px 10px 10px">
                                        <form class="layui-form layui-form-pane" action="">
                                            <div class="layui-form-item cross-pos">
                                                <!-- <div class="layui-inline"> -->
                                                    <label class="layui-form-label">路口位置</label>
                                                    <div class="layui-input-inline" lay-key="7">
                                                        <input type="text" name="" placeholder="默认：全部" autocomplete="off" class="layui-input" id="cur-cross">
                                                    </div>
                                                <!-- </div> -->
                                            </div>
                                        </form>
                                    </div>
                                </fieldset>
                                <div id="type-pie" style="width: 100%;height:400px; padding-top:30px;"></div>
                                <div id="type-rader" style="width: 100%;height:500px;padding-top: 10px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'miniTab', 'echarts', 'tableSelect'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts,
            tableSelect = layui.tableSelect;

        miniTab.listen();

        var echartsPie = echarts.init(document.getElementById('type-pie'), 'walden'),
            echartsArea = echarts.init(document.getElementById('type-line-area'), 'walden'),
            echartsRader = echarts.init(document.getElementById('type-rader'), 'walden');
        var optPie = {
            color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            title: {
                text: '违法违章类型占比分析(本月统计)',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '本月数据',
                    type: 'pie',
                    radius: '40%',
                    data: [
                        { value: 1048, name: '压实线变道' },
                        { value: 735, name: '违章调头' },
                        { value: 580, name: '变道不按规定使用转向灯' },
                        { value: 433, name: '闯红灯' },
                        { value: 300, name: '其他' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echartsPie.setOption(optPie);
        var optLineArea  = {
            color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            title: {
                text: '违法违章类型按路口分布分析(本月统计)',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                padding:[50,0,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                data: ['其他', '闯红灯', '变道不按规定使用转向灯', '违章调头', '压实线变道']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '20%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: { //设置x轴的字
                        show: true,
                        interval: 0,//使x轴横坐标全部显示
                        rotate: 70,//x轴文字倾斜角度
                    },
                    data: ['书院路与赤岭路交叉路口', '新开铺路与新韶路的交叉路口', '万芙路与豹塘路交叉路口', '新姚路与玉兰路交叉路口', '新韶路与五凌路交叉路口', '太平路的坡子街至解放西路路段', '银杏路与玉兰路交叉路口']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '其他',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '闯红灯',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '变道不按规定使用转向灯',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '违章调头',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '压实线变道',
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        echartsArea.setOption(optLineArea);
        var optRar = {
            title: {
                text: '违法产生因素(示例)',
                left: 'center'
            },
            legend: {
                padding:[40,0,40,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                data: ['压实线变道', '违章调头']
            },
            radar: {
                // shape: 'circle',
                center: ['50%', '60%'],
                // 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
                radius: 160,
                // 圆的半径，数组的第一项是内半径，第二项是外半径。
                startAngle: 90,
                indicator: [
                    { name: '系统检测错误', max: 6500 },
                    { name: '交警错判', max: 16000 },
                    { name: '缺少交通指示', max: 30000 },
                    { name: '驾驶员无意识违法', max: 38000 },
                    { name: '交通标志设置不合理', max: 52000 },
                    { name: '驾驶员主观违法', max: 25000 }
                ]
            },
            series: [
                {
                    name: '各类违法比较',
                    type: 'radar',
                    radius: '70%',
                    data: [
                        {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            name: '压实线变道'
                        },
                        {
                            value: [5000, 14000, 28000, 26000, 42000, 21000],
                            name: '违章调头'
                        }
                    ]
                }
            ]
        };
        echartsRader.setOption(optRar);

        function getNum(minNum, maxNum){
            switch(arguments.length){ 
                case 1: 
                    return parseInt(Math.random()*minNum+1,10); 
                    break; 
                case 2: 
                    return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
                    break; 
                default: return 0; break; 
            } 
        }

        tableSelect.render({
            elem: '#cur-type',	// 定义输入框input对象 必填
            checkedKey: 'id', // 表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	// 搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	// 搜索输入框的提示文字 默认关键词搜索
            height: '350',  // 自定义高度
            width: '350',  // 自定义宽度
            table: {	// 定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '../api/illegalType.json',
                cols: [[
                    { type: 'radio' },
                    { field: 'id', title: '编号' },
                    { field: 'addr', title: '类型描述' }
                ]]
            },
            done: function (elem, data) {
                // 选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                // 拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.addr);
                })
                elem.val(NEWJSON.join(","));

                let randId = getNum(256, 25000) % 4 + 1;
                let mapName = 'heaps/heatmap' + randId + '.html';
                console.log(mapName);
                $('#illegal-heap-1').find('iframe').attr('src', mapName);
                // $('#illegal-heap-1').find('iframe').contentWindow.location.reload(true);
            }
        });

        tableSelect.render({
            elem: '#cur-cross',	// 定义输入框input对象 必填
            checkedKey: 'id', // 表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	// 搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	// 搜索输入框的提示文字 默认关键词搜索
            height: '350',  // 自定义高度
            width: '350',  // 自定义宽度
            table: {	// 定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '../api/cross.json',
                cols: [[
                    { type: 'radio' },
                    { field: 'id', title: '编号' },
                    { field: 'addr', title: '地址' }
                ]]
            },
            done: function (elem, data) {
                // 选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                // 拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.addr)
                })
                elem.val(NEWJSON.join(","))
            }
        });
    });
</script>
</body>
</html>
